<template>
  <dv-border-box-11 title="设备详情" class="sysmDetails">
    <div class="box">
      <div class="leftBox">
        <dv-border-box-3
          ><span>设备概况</span>
          <boxView1 :itemDetials="itemDetials"></boxView1>
        </dv-border-box-3>
        <dv-border-box-8
          ><span>工作时长</span>
          <boxView2 :itemDetials="itemDetials"></boxView2>
        </dv-border-box-8>
      </div>
      <div class="rightBox">
        <dv-border-box-5 :reverse="true">
          <span>生产效率</span>
          <boxView3 :itemDetial="itemDetial" :key="updateKey"></boxView3>
        </dv-border-box-5>
        <dv-border-box-10
          ><span>设备效率</span>
          <boxView4 :itemDetials="itemDetials" :itemMsg4="itemMsg4"></boxView4
        ></dv-border-box-10>
      </div>
    </div>
  </dv-border-box-11>
</template>

<script>
import boxView1 from "./details/boxView1.vue";
import boxView2 from "./details/boxView2.vue";
import boxView3 from "./details/boxView3.vue";
import boxView4 from "./details/boxView4.vue";
export default {
  name: "sysmDetails",
  components: { boxView1, boxView2, boxView3, boxView4 },
  props: {
    itemDetials: {
      type: Object,
      default: () => ({}),
    },
    itemMsg4: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  watch: {},
  data() {
    return { updateKey: 1, itemDetial: {} };
  },
  created() {
    this.$nextTick(() => {
      this.updateKey += 1;
      this.itemDetial = this.itemDetials;
    });
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
span {
  font-size: 20px;
  line-height: 12px;
  text-align: center;
  background-color: #112340;
}
.sysmDetails {
  width: 1600px;
  height: 880px;
  border-radius: 10px;
  background: linear-gradient(to right, #0f1836, #14314d);

  .box {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
  }
  .leftBox {
    .dv-border-box-3 {
      margin: 30px 0;
      width: 620px;
      height: 440px;
    }
    .dv-border-box-8 {
      width: 620px;
      height: 330px;
    }
  }
  .rightBox {
    // width: 1270px;
    // height: 850px;
    .dv-border-box-5 {
      width: 870px;
      margin: 45px 0 30px 0;
      height: 420px;
      border-color: #8993f2;
    }
    .dv-border-box-10 {
      width: 870px;
      height: 350px;
    }
  }
}
</style>
